<template>
  <div style="">
    <h1 style="text-align: center">账户信息</h1>
    <a-descriptions bordered title :column="1">
      <a-descriptions-item label="账户地址">
        <div style="text-align: left">
          {{ account.address }}
          <a-icon type="copy" @click="copy(account.address)" />
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="账户余额">
        <div style="text-align: left">
          {{ account.balance }}
          <a-button type="primary" @click="getBalance" :loading="loading"
            >刷新</a-button
          >
        </div>
      </a-descriptions-item>
    </a-descriptions>

    <br />
    <h1 style="text-align: center">转账操作</h1>

    <a-form
      :form="form"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 12 }"
      @submit="handleSubmit"
    >
      <a-form-item label="转账地址" v-if="userType === '0'">
        <a-input
          allow-clear
          placeholder="请输入转账地址"
          v-decorator="[
            'fromAddr',
            {
              rules: [{ required: true, message: '请输入转账地址!' }],
            },
          ]"
        />
      </a-form-item>
      <a-form-item label="接收地址">
        <a-input
          allow-clear
          placeholder="请输入接收地址"
          v-decorator="[
            'toAddr',
            {
              rules: [{ required: true, message: '请输入接收地址!' }],
            },
          ]"
        />
      </a-form-item>
      <a-form-item label="转账数量">
        <div style="text-align: left">
          <a-input-number
            :default-value="0.1"
            :min="0.1"
            :max="10"
            :step="0.1"
            allow-clear
            placeholder="转账数量"
            v-decorator="[
              'value',
              {
                rules: [{ required: true, message: '请输入转账数量!' }],
              },
            ]"
          />
          ETH
        </div>
      </a-form-item>
      <a-form-item label="备注信息">
        <a-textarea
          :autosize="{ minRows: 2, maxRows: 5 }"
          allow-clear
          placeholder="请输入备注信息"
          v-decorator="[
            'note',
            {
              // rules: [
              //   { required: true, message: 'Please input your binary code!' },
              // ],
            },
          ]"
        />
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
        <a-button type="primary" html-type="submit" :disabled="submitting"
          >发起转账</a-button
        >
      </a-form-item>
    </a-form>
  </div>
</template>


<script>
import Constant from "../utils/Constant";
import Clipboard from "clipboard";
export default {
  data() {
    return {
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      submitting: false,
      loading: false,
      authorization: null,
      userType: "2",
      account: {
        balance: 0,
        address: "",
      },
    };
  },
  created() {
    console.log("crated");
    console.log(localStorage);
    this.authorization = localStorage.getItem("authorization");
    this.userType = localStorage.getItem("userType");

    this.getBalance();
    // this.$on("logined", () => {
    //   this.getBalance();
    // });
  },

  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
          // console.log(this.form);
          this.submitting = true;
          this.doTransfer(values);
        }
      });
    },

    doTransfer(formValues) {
      let params = {};
      params.from = formValues.fromAddr;
      params.to = formValues.toAddr;
      params.value = formValues.value;
      params.note = formValues.note;

      let headers = {};
      headers.headers = { authorization: this.authorization };

      let url = Constant.ACCOUNT_TRANSFER_URL;
      this.$http.post(url, params, headers).then(
        (resp) => {
          console.log(resp);
          if (resp.data.code === "01") {
            this.$message.success("转账请求已提交成功,请稍后确实是否转账成功");
          } else {
            this.$message.error(resp.data.message);
          }
          this.submitting = false;
        },
        (err) => {
          console.log(err);
        }
      );
    },

    getBalance() {
      let headers = {};
      headers.headers = { authorization: this.authorization };
      let url = Constant.USER_BALANCE_URL;
      this.loading = true;
      this.$http.get(url, headers).then(
        (resp) => {
          console.log(resp);
          if (resp.data.code === "01") {
            this.$set(this.account, "address", resp.data.result.address);
            this.$set(this.account, "balance", resp.data.result.balance);
          }
          this.loading = false;
        },
        (err) => {
          console.log(err);
          this.loading = false;
        }
      );
    },
    copy(data) {
      console.log("copy", data);
      Constant.copyToClipboard(data, () => {
        this.$message.success(data + " Copied!");
      });
      // if (window.clipboardData) {
      //     window.clipboardData.setData("text", data);
      //     this.$message.success(data + " Copied!")
      //   } else {
      //     (function (content) {
      //       document.oncopy = function (e) {
      //         e.clipboardData.setData("text", content);
      //         e.preventDefault();
      //         document.oncopy = null;
      //       };
      //     })(data);
      //     document.execCommand("Copy");
      //     this.$message.success(data + " Copied!")
      //   }
    },
  },
};
</script>
